<template>
  <div>
    <input v-bind:type="inputtype" name="" id="" />
    <h1 v-bind:class="{ red: isRed, border: isBorder }">测试绑定class</h1>
    <h2 :class="[color, border]">测试数组方式绑定class</h2>
    <h1>购物车测试</h1>
    <table style="border: 1px solid black">
      <tr>
        <td>游戏名</td>
        <td>数量</td>
        <td>单价</td>
        <td>小计</td>
      </tr>
      <tr v-for="(item, index) in goods" :key="item.name">
        <td>{{ item.name }}</td>
        <td>
          <button @click="sub(index)">-</button>
          <input type="number" v-model="item.num" />
          <button @click="add(index)">+</button>
        </td>
        <td>{{ item.price }}</td>
        <td>{{ item.sum }}</td>
      </tr>
    </table>
    <p>总计{{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputtype: "text",
      isRed: true,
      isBorder: true,
      color: "red",
      border: "border",
      goods: [
        {
          name: "Witcher3",
          price: 68,
          num: 0,
          sum: 0,
        },
        {
          name: "City-Skyline",
          price: 88,
          num: 0,
          sum: 0,
        },
        {
          name: "Civilization6",
          price: 168,
          num: 0,
          sum: 0,
        },
        {
          name: "AssassinCreed",
          price: 268,
          num: 0,
          sum: 0,
        },
      ],
    };
  },
  computed: {
    total() {
      console.log("getTotal");
      let total = 0;
      for (var i in this.goods) {
        total += this.goods[i].sum;
      }
      return total;
    },
  },
  methods: {
    sub(index) {
      if (this.goods[index].num >= 1) {
        this.goods[index].num -= 1;
        this.goods[index].sum = this.goods[index].num * this.goods[index].price;
      }
    },
    add(index) {
      this.goods[index].num += 1;
      console.log(this.goods[index].num);
      this.goods[index].sum = this.goods[index].num * this.goods[index].price;
    },
  },
};
</script>
